// 无状态组件 状态不可变的widget（小组件）
import 'package:flutter/material.dart';

class MyApp extends StatelessWidget {
  // 2. 设置默认值
  const MyApp({
    super.key,
    this.title = '',
    this.content = '',
    this.tColor = Colors.orange,
    this.cColor = Colors.yellow,
  });

  // 1. 定义属性
  final String title;
  final String content;
  final Color tColor;
  final Color cColor;

  // 重写build 返回需要封装的组件即可
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.purple,
          title: Center(
            child: Text(
              title,
              style: TextStyle(
                  color: tColor, fontSize: 30, fontWeight: FontWeight.w900),
            ),
          ),
        ),
        // 1.2 主体部分
        body: const MyContainer9(),
      ),
    );
  }
}

class MyAPP1 extends StatelessWidget {
  const MyAPP1({super.key});

  // 重写build 返回需要封装的组件即可
  @override
  Widget build(BuildContext context) {
    return const Center(
      // 3.子组件 Text 文本
      child: Text(
          // 内容
          'What can I say',
          // 文字方向
          textDirection: TextDirection.ltr,
          style: TextStyle(
            fontSize: 50,
            fontWeight: FontWeight.bold,
            color: Colors.pink,
          )),
    );
  }
}

class MyApp2 extends StatelessWidget {
  const MyApp2({super.key, this.title = '', this.content = ''});

  final String title;
  final String content;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            // 1.1 导航
            appBar: AppBar(
              centerTitle: true,
              backgroundColor: Colors.pink,
              title: Text(title,
                  textDirection: TextDirection.rtl,
                  style: const TextStyle(color: Colors.orange)),
            ),
            // 1.2 主体部分
            body: Center(
                child: Text(
              content,
              textDirection: TextDirection.rtl,
              style: const TextStyle(fontSize: 30, color: Colors.pink),
            ))));
  }
}

class MyApp3 extends StatelessWidget {
  const MyApp3({super.key, this.title = '', this.content = ''});

  final String title;
  final String content;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            // 1.1 导航
            appBar: AppBar(
              centerTitle: true,
              backgroundColor: Colors.purple,
              title: const Text('还没上班的娃子',
                  textDirection: TextDirection.ltr,
                  style: const TextStyle(
                      color: Colors.white, fontWeight: FontWeight.bold)),
            ),
            // 1.2 主体部分
            body: Container(
                width: MediaQuery.of(context).size.width,
                height: MediaQuery.of(context).size.height,
                margin: const EdgeInsets.all(30),
                // color: Colors.brown[50] 设置了decoration, 颜色写在BoxDecoration
                // 4. 设置内边距
                padding: const EdgeInsets.all(30),
                alignment: Alignment.center, //子组件在父组件里居中
                decoration: BoxDecoration(
                    //  一旦设置了decoration, 背景必须写在这里面
                    // color: Colors.deepPurpleAccent[50],
                    color: Colors.brown[50],
                    //  设置边框
                    border: Border.all(color: Colors.red, width: 6),
                    // 设置圆角
                    borderRadius: BorderRadius.circular(20)),
                child: const Text(
                  '还在学习鸿蒙',
                  textDirection: TextDirection.ltr,
                  style: TextStyle(fontSize: 50, color: Colors.green),
                ))));
  }
}

class MyApp4 extends StatelessWidget {
  const MyApp4({super.key});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height,
        color: Colors.blue[50],
        child: Column(
          children: [
            const Text(
              '错过这个村，就没这个店咯',
              style: TextStyle(fontSize: 30),
              textDirection: TextDirection.ltr,
            ),
            Image.network(
              'https://yanxuan-item.nosdn.127.net/72e734dd1a4d35ce650afebdaa600b57.png',
              width: 400,
            ),
            const Text('不要998，不要698，只要99.8即可带走',
                style: TextStyle(fontSize: 20),
                textDirection: TextDirection.ltr)
          ],
        ),
      ),
    );
  }
}

class MyApp5 extends StatelessWidget {
  // 2. 设置默认值
  const MyApp5({
    super.key,
    this.title = '',
    this.content = '',
    this.tColor = Colors.orange,
    this.cColor = Colors.yellow,
  });

  // 1. 定义属性
  final String title;
  final String content;
  final Color tColor;
  final Color cColor;

  // 重写build 返回需要封装的组件即可
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.purple,
          title: Center(
            child: Text(
              '标题为:$title',
              style: TextStyle(
                  color: tColor, fontSize: 30, fontWeight: FontWeight.w900),
            ),
          ),
        ),
        // 1.2 主体部分
        body: const MyContainer(),
      ),
    );
  }
}

class MyContainer extends StatelessWidget {
  const MyContainer({super.key});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Stack(
        // 对齐
        alignment: AlignmentDirectional.center,
        // 超出的内容是否需要显示
        clipBehavior: Clip.none,
        children: [
          Container(
            width: 300,
            height: 300,
            color: Colors.blueAccent,
          ),
          Positioned(
            top: -100,
            child: Image.asset('open_eyes.png'),
          )
        ],
      ),
    );
  }
}

class MyApp6 extends StatelessWidget {
  // 2. 设置默认值
  const MyApp6({
    super.key,
    this.title = '',
    this.content = '',
    this.tColor = Colors.orange,
    this.cColor = Colors.yellow,
  });

  // 1. 定义属性
  final String title;
  final String content;
  final Color tColor;
  final Color cColor;

  // 重写build 返回需要封装的组件即可
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.purple,
          title: Center(
            child: Text(
              '标题为:$title',
              style: TextStyle(
                  color: tColor, fontSize: 30, fontWeight: FontWeight.w900),
            ),
          ),
        ),
        // 1.2 主体部分
        body: const MyContainer6(),
      ),
    );
  }
}

class MyContainer6 extends StatelessWidget {
  const MyContainer6({super.key});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        children: [
          // 包裹之后，会在当前的布局方向上，默认占满
          Expanded(
              flex: 3,
              child: Container(
                width: 100,
                // height: 200,
                color: Colors.yellow[200],
              )),
          Expanded(
              flex: 8,
              child: Container(
                width: 100,
                // height: 200,
                color: Colors.red,
              )),
          Expanded(
              flex: 2,
              child: Container(
                width: 100,
                // height: 200,
                color: Colors.yellow[200],
              ))
        ],
      ),
    );
  }
}

class MyContainer7 extends StatelessWidget {
  const MyContainer7({super.key});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        children: [
          // 包裹之后，会在当前的布局方向上，默认占满
          Expanded(
              flex: 3,
              child: Container(
                width: 100,
                // height: 200,
                color: Colors.yellow[200],
              )),
          Expanded(
              flex: 8,
              child: Container(
                width: 100,
                // height: 200,
                color: Colors.red,
              )),
          Expanded(
              flex: 2,
              child: Container(
                width: 100,
                // height: 200,
                color: Colors.yellow[200],
              ))
        ],
      ),
    );
  }
}

class MyContainer8 extends StatelessWidget {
  const MyContainer8({super.key});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        children: [
          // 包裹之后，会在当前的布局方向上，默认占满
          Expanded(
              flex: 3,
              child: Container(
                width: 100,
                // height: 200,
                color: Colors.yellow[200],
              )),
          Expanded(
              flex: 8,
              child: Container(
                width: 100,
                // height: 200,
                color: Colors.red,
              )),
          Expanded(
              flex: 2,
              child: Container(
                width: 100,
                // height: 200,
                color: Colors.yellow[200],
              ))
        ],
      ),
    );
  }
}

class MyContainer9 extends StatelessWidget {
  const MyContainer9({super.key});

  @override
  Widget build(BuildContext context) {
    return ListView(
      scrollDirection: Axis.vertical,
      // physics: const NeverScrollableScrollPhysics(),
      children: [
        Container(
          height: 200,
          color: Colors.red,
        ),
        Container(
          height: 200,
          color: Colors.orange,
        ),
        Container(
          height: 200,
          color: Colors.yellow,
        ),
        Container(
          height: 200,
          color: Colors.green,
        ),
        Container(
          height: 200,
          color: Colors.greenAccent,
        ),
        Container(
          height: 200,
          color: Colors.blue,
        ),
        Container(
          height: 200,
          color: Colors.purple,
        ),
      ],
    );
  }
}
